<template>
	<view class="blockchain_details">
		<block v-if="account== null && cardChainInfoList.length == 0">
			<view class="no_info">
				<image src="/static/my/order_no.png" mode="widthFix"></image>
				<text>无数据</text>
			</view>
		</block>
		<block v-else>
		<view class="details_header">
			<image class="icon" src="/static/my/block_icon.png" mode="widthFix"></image>
			<image class="word" src="/static/my/block_word.png" mode="widthFix"></image>
		</view>
		<view class="details_box">
			<view class="details_info" v-if="account != null">
				<view class="title">账户信息</view>
				<view class="content">
					<view class="content_li">
						<view class="c_li_title">交易哈希</view>
						<view class="c_li_word">
							<text>{{account.address}}</text>
							<image src="/static/my/copy01.png" mode="widthFix" @click="copy('999')"></image>
						</view>
					</view>
					<view class="content_li">
						<view class="c_li_title">注册时间</view>
						<view class="c_li_word">
							<text>{{account.createTime}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="details_info" v-if="cardChainInfoList.length > 0">
				<view class="title">TA的数字权益 {{cardChainInfoList.length}}张</view>
				
				<view class="content" v-for="(item,index) in cardChainInfoList" :key="index">
					<view class="content_li">
						<view class="c_li_title">数字权益卡名称</view>
						<view class="c_li_word">
							<text>{{item.cardName}}</text>
						</view>
					</view>
					<view class="content_li">
						<view class="c_li_title">交易哈希</view>
						<view class="c_li_word">
							<text>{{item.voucher}}</text>
							<image src="/static/my/copy01.png" mode="widthFix" @click="copy(item.voucher)"></image>
						</view>
					</view>
					<view class="content_li">
						<view class="c_li_title">注册时间</view>
						<view class="c_li_word">
							<text>{{item.chainTime}}</text>
						</view>
					</view>
				</view>

			</view>
		</view>
		</block>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				account:null,
				cardChainInfoList:[],
				voucher:''
			}
		},
		onLoad(e) {
			this.voucher = e.voucher
			this.getCustomerChainDetail()
		},
		methods: {
			getCustomerChainDetail(){
				this.$api.getCustomerChainDetail(this.voucher).then(res=>{
					this.account = res.data.account
					this.cardChainInfoList = res.data.cardChainInfoList
				})
			},
			copy(text){
				if(text != ''){
					var _this = this
					 _this.$copyText(text).then(
                        res => {
                          uni.showToast({
                            title: '复制成功',
                            icon: 'none'
                          })
                        }
                      )
				}

			}
		}
	}
</script>

<style scoped>
	.details_header{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 40rpx;
	}
	.details_header .icon{
		width: 96rpx;
		height: 120rpx;
		margin-bottom: 20rpx;
	}
	.details_header .word{
		width: 260rpx;
		height: 24rpx;
		margin-bottom: 58rpx;
	}
	.details_box{
		width: 686rpx;
		margin: 0 auto;
	}
	.details_info{
		padding-bottom: 40rpx;
	}
	.details_info .title{
		font-size: 28rpx;
		color: #000000;
		margin-bottom: 10rpx;
	}
	.details_info .content{
		width: 100%;
		padding: 24rpx;
		box-sizing: border-box;
		background: #F3F3F3;
		border-radius: 16rpx;
		font-size: 24rpx;
		margin-bottom: 20rpx;
	}
	.details_info .content:last-child{
		margin-bottom: unset;
	}
	.content_li{
		margin-bottom: 24rpx;
	}
	.content_li:last-child{
		margin-bottom: unset;
	}
	.content_li .c_li_title{
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		margin-bottom: 6rpx;
	}
	.content_li .c_li_word{
		word-wrap: break-word;
		line-height: 40rpx;
	}
	.content_li .c_li_word image{
		width: 32rpx;
		height: 30rpx;
		float: right;
		margin-right: 14rpx;
	}
</style>
